<script lang="ts">
import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";

export default {
  components: {KtIcon},
  data() {
    return {
      bodyData: [],
      bodyDataMap: {},
      lv0Data: [],
      lv1Data: [],
      lv0DataSelected: {
        id: "",
        children: []
      },
      lv2Data: [],
      lv1DataSelected: {
        id: "",
        children: []
      },
      dialogShow: false,
      requestParamOfSave: {
        name: "",
        code: "",
        parentCode: "",
        degrees: []
      },
      removeLoading: false
    };
  },
  mounted() {
    this.getLv0Data();
    this.getBodyData();
  },
  methods: {
    /**
     * 删除
     */
    toRemove(major) {
      // 提示
      this.$confirm('此操作将永久删除该专业, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let loading = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.removeLoading = true;

        this.$kt.request.send({
          uri: "/tool-edu/admin/major/remove",
          method: "post",
          data: major,
          stateSuccess: (res) => {
            this.getLv0Data().then(()=>{
              loading.close();
              // 选择当前专业门类
              for (let i = 0; i < this.lv0Data.length; i++) {
                if (this.lv0Data[i].code === this.requestParamOfSave.lv0Code) {
                  this.selectLv0Data(this.lv0Data[i]);
                  break;
                }
              }

              // 选择当前一级专业
              for (let i = 0; i < this.lv1Data.length; i++) {
                if (this.lv1Data[i].code === this.requestParamOfSave.lv1Code) {
                  this.selectLv1Data(this.lv1Data[i]);
                  break;
                }
              }
              this.removeLoading = false;


              this.requestParamOfSave = {
                name: "",
                code: "",
                parentCode: ""
              };
              this.$message.success(res.msg);
              this.$forceUpdate();
            });
          },
          stateFail: (err) => {
            this.removeLoading = false;
            loading.close();
            this.$message.error(err.errMsg);
          }
        });
      }).catch(() => {
      });
    },

    /**
     * 判断是否已经选择了学位
     * @param degree
     */
    isDegrees(degree) {
      return this.requestParamOfSave.degrees.some(item => item.majorDegreeCode === degree.code);
    },
    /**
     * 选择学位
     * @param degree
     */
    selectDegree(degree) {
      for (let i = 0; i < this.requestParamOfSave.degrees.length; i++) {
        if (this.requestParamOfSave.degrees[i].majorDegreeCode === degree.code) {
          this.requestParamOfSave.degrees.splice(i, 1);
          return;
        }
      }
      this.requestParamOfSave.degrees.push({
        majorDegreeCode: degree.code
      });
    },
    save() {

      let loading = this.$loading({
        lock: true,
        text: '保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      if (this.requestParamOfSave.name === "") {
        this.$message.error("专业名称不能为空");
        loading.close();
        return;
      }

      if (this.requestParamOfSave.code === "") {
        this.$message.error("专业代码不能为空");
        loading.close();
        return;
      }

      if (this.requestParamOfSave.lv === 2) {
        this.requestParamOfSave.lv2Code = this.requestParamOfSave.code;
      }

      this.$kt.request.send({
        uri: "/tool-edu/admin/major/save",
        method: "post",
        data: this.requestParamOfSave,
        stateSuccess: (res) => {
          this.dialogShow = false;

          this.getLv0Data().then(() => {
            loading.close();
            // 选择当前专业门类
            for (let i = 0; i < this.lv0Data.length; i++) {
              if (this.lv0Data[i].code === this.requestParamOfSave.lv0Code) {
                this.selectLv0Data(this.lv0Data[i]);
                break;
              }
            }

            // 选择当前一级专业
            for (let i = 0; i < this.lv1Data.length; i++) {
              if (this.lv1Data[i].code === this.requestParamOfSave.lv1Code) {
                this.selectLv1Data(this.lv1Data[i]);
                break;
              }
            }


            this.requestParamOfSave = {
              name: "",
              code: "",
              parentCode: ""
            };
            this.$message.success(res.msg);
          });
        },
        stateFail: (err) => {
          loading.close();
          this.$message.error(err.errMsg);
        }
      });
    },
    getBodyData() {
      return new Promise((resolve, reject) => {
        this.$kt.request.send({
          uri: "/tool-edu/major/getAll",
          stateSuccess: (res) => {
            this.bodyData = res.data;
            this.bodyDataMap = {};
            for (let i = 0; i < this.bodyData.length; i++) {
              this.bodyDataMap[this.bodyData[i].code] = this.bodyData[i];
            }
            resolve();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            reject();
          }
        });
      });
    },
    getLv0Data() {
      return new Promise((resolve, reject) => {
        this.$kt.request.send({
          uri: "/tool-edu/major/getAllHasChildren",
          stateSuccess: (res) => {
            this.lv0Data = res.data;
            console.log(this.lv0Data);
            resolve();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            reject();
          }
        });
      });
    },
    // 获取子节点的子节点的数量
    getChildrenChildrenCount(item) {
      let count = 0;
      for (let i = 0; i < item.children.length; i++) {
        count += item.children[i].children.length;
      }
      return count;
    },
    /**
     * 选择门类
     */
    selectLv0Data(item) {
      this.lv0DataSelected = item;
      this.lv1Data = item.children;
      // 如果lv1Data有数据,则默认选中第一个
      if (this.lv1Data.length > 0) {
        this.selectLv1Data(this.lv1Data[0]);
      }
    },
    /**
     * 选择一级专业
     */
    selectLv1Data(item) {
      this.lv1DataSelected = item;
      this.lv2Data = item.children;
    },
    /**
     * 打开弹窗
     */
    openAddDialog(item) {
      this.requestParamOfSave.lv0Code = this.lv0DataSelected.code;
      this.requestParamOfSave.lv1Code = this.lv1DataSelected.code;
      this.requestParamOfSave.lv = 2;
      this.requestParamOfSave.parentCode = this.lv1DataSelected.code;
      this.requestParamOfSave.code = item.code;
      this.dialogShow = true;
      this.requestParamOfSave.degrees = [{
        majorDegreeCode: this.lv0DataSelected.code
      }];
    },
    /**
     * 打开编辑弹窗
     */
    openDialog(item) {
      this.requestParamOfSave = JSON.parse(JSON.stringify(item));
      this.requestParamOfSave.lv0Code = this.lv0DataSelected.code;
      this.requestParamOfSave.lv1Code = this.lv1DataSelected.code;
      this.requestParamOfSave.lv = 2;
      this.requestParamOfSave.parentCode = this.lv1DataSelected.code;
      this.requestParamOfSave.code = item.code+"";
      this.requestParamOfSave.name = item.name+"";
      this.requestParamOfSave.degrees = JSON.parse(JSON.stringify(item.degrees));
      this.dialogShow = true;
    }
  }
}
</script>

<template>
  <div class="box">
    <el-card style="display: inline-block">
      <template #header>
        <div>门类</div>
      </template>
      <el-scrollbar
          style="width: 230px;height: calc(100vh - 110px)"
      >
        <div
            v-for="item in lv0Data"
            @click="selectLv0Data(item)"
            class="card"
            :class="{
              'card-selected': item.id === lv0DataSelected.id
            }"
        >
          <div>{{ item.name }}</div>
          <div>#{{ item.code }}</div>
          <div style="height: 10px"></div>
          <div class="card-small-text">含 {{ item.children.length }} 个一级专业</div>
          <div class="card-small-text">含 {{ getChildrenChildrenCount(item) }} 个二级专业</div>
        </div>
      </el-scrollbar>

    </el-card>

    <!-- 一级专业 -->
    <el-card
        v-if="lv0DataSelected.id"
        style="display: inline-block">
      <template #header>
        <div>一级专业</div>
      </template>
      <el-scrollbar
          style="width: 230px;height: calc(100vh - 110px)"
      >
        <div
            v-for="item in lv1Data"
            class="card"
            @click="selectLv1Data(item)"
            :class="{
              'card-selected': item.id === lv1DataSelected.id
            }"
        >
          <div>{{ item.name }}</div>
          <div>#{{ item.code }}</div>
          <div style="height: 10px"></div>
          <div class="card-small-text">含 {{ item.children.length }} 个二级专业</div>
        </div>
      </el-scrollbar>
    </el-card>

    <!-- 二级专业 -->
    <el-card
        v-if="lv1DataSelected.id"
        style="display: inline-block">
      <template #header>
        <div style="text-align: left;position: relative;">

          <div>二级专业</div>

          <!--      添加    -->
          <el-button
              @click="openAddDialog({code:null})"
              style="position: absolute;right: 0;top:50%;transform: translateY(-50%);">
            <kt-icon icon="el-icon-plus"></kt-icon>
          </el-button>
        </div>
      </template>
      <el-scrollbar
          style="width: 230px;height: calc(100vh - 110px)"
      >
        <div v-if="!removeLoading">
        <div
            v-for="item in lv2Data"
            class="card">
          <div>{{ item.name }}</div>
          <div>#{{ item.code }}</div>
          <el-divider>
            <div style="font-size: 12px">可获学位</div>
          </el-divider>
          <div>
            <div v-for="degree in item.degrees">
              <el-tag
                  style="background-color: #000000;color:#FFFFFF;border-radius: 15px">
                {{ bodyDataMap[degree.majorDegreeCode].name }} #{{ bodyDataMap[degree.majorDegreeCode].code }}
              </el-tag>
            </div>
          </div>
          <div style="height: 10px"></div>
          <div>
            <!-- 编辑 -->
            <el-button
                @click="openDialog(item)"
                type="text"
                size="small">
              <kt-icon icon="el-icon-edit"></kt-icon>
            </el-button>
            <!-- 删除 -->
            <el-button
                @click="toRemove(item)"
                type="danger"
                size="small">
              <kt-icon
                  color="#FFFFFF"
                  icon="el-icon-delete"></kt-icon>
            </el-button>
          </div>
        </div>

        </div>

      </el-scrollbar>
    </el-card>

    <el-dialog
        title="新增/编辑 二级专业"
        v-model="dialogShow"
        style="border-radius: 20rpx"
        width="400px">
      <el-form
          label-position="top"
      >
        <el-form-item label="一级专业">
          <el-input
              v-model="lv1DataSelected.name"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input
              v-model="requestParamOfSave.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="专业代码">
          <el-input
              v-model="requestParamOfSave.code"
          ></el-input>
        </el-form-item>
        <el-form-item label="可获得学位">
          <el-scrollbar style="height: 200px">

          <div style="text-align: center">
            <div
                v-for="degree in lv0Data"
                @click="selectDegree(degree)"
                :style="{
                  opacity: isDegrees(degree) ? 1 : 0.5
                }"
                class="tag">
              <div>
                {{ degree.name }}
              </div>
              <div>
                #{{degree.code}}
              </div>
            </div>
          </div>
          </el-scrollbar>

        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped lang="scss">
.box {
  text-align: center;
  min-width: 1000px;
}

.card {
  display: inline-block;
  width: 200px;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 20px;
  cursor: pointer;
  color: #000;

  .card-small-text {
    font-size: 12px;
    color: #666;
  }
}

.card:hover {
  background-color: #f0f0f0;
}

.card-selected {
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  border: 1px solid #000000;
}

.pointer {
  cursor: pointer;
}

.tag {
  display: inline-block;
  border-radius: 15px;
  margin: 5px;
  width: 150px;
  cursor: pointer;
  border: 3px solid #000000;
  color: #000000;
}
</style>